<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>充值</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<style type="text/css">
			.cz_top{
				background: #fff;
				padding: 2vw;
				box-shadow: 1px 2px 8px #d1d1d1;
			}
			.cz_top img{
				width: 14vw;
				border-radius: 50%;
				float: left;
				margin-right: 2vw;
			}
			.cz_top h4{
				color: #7a7a7a;
				font-weight: 500;
				font-size: 16px;
				margin-top: 3vw;
			}
			.cz_top p{
				font-size: 12px;
			}
			.cz_zhuanqu{
				padding: 2vw 2vw 6vw 2vw;
				background: #fff;
				margin-top: 2vh;
				box-shadow: 1px 2px 8px #d1d1d1;
			}
			.cz_zhuanqu div{
				box-sizing: border-box;
			}
			.cz_zhuanqu .title{
				text-align: center;
				line-height: 3;
				font-size: 16px;
				color: #00a0e9;
			}
			.cz_huiyuanleixing{
				width: 94vw;
				margin: 1vh auto 0 auto;
				box-shadow: 1px 1px 14px #e9e9e9;
			}
			.cz_zhuanqu_box{
				line-height: 5vh;
				padding: 2vw 4vw;
				font-size: 14px;
				color: #666;
				position: relative;
			}
			.cz_zhuanqu_box b ,.cz_zhuanqu_box i{
				font-weight: 500;
			}
			.cz_zhuanqu_box i{
				font-style: normal;
				font-size: 14px;
			}
			.cz_zhuanqu_box b{
				color: #f17f7f;
				font-size: 18px;
				float: right;
			}
			.cz_zhuanqu_box img{
				position: absolute;
				right: -1px;
				bottom: 0;
				width: 10vw;
				display: none;
			}
			.cz_huiyuanleixing .cur{
				border: .4vw solid #007aff
			}
			.cz_huiyuanleixing .cur img{
				display: block;
			}
			.cz_quanyi{
				background: #fff;
				margin-top: 2vh;
				padding: 2vw;
				box-shadow: 1px 1px 14px #cacaca;
				margin-bottom: 6vh;
			}
			.cz_quanyi p{
				margin-bottom: 0;
				text-indent: 2rem;
				font-size: 12px;
			}
			.cz_quanyi div{
				font-size: 14px;
			}
			.bottom_btn{
				position: fixed;
				bottom: 0;
				width: 100%;
			}
			.bottom_btn span{
				font-size: 14px;
				margin-bottom: 0;
				padding: 12px 0;
			}
		</style>
	</head>

	<body>
	    <!--顶部-->
	    <div class="mui-content">
	    	<div class="cz_top mui-clearfix">
	    		<img src="img/logo.png"/>
	    		<h4>ID:<span>10019</span></h4>
				<p>您暂时还未开通会员</p>
	    	</div>
	    </div>
	    <!-- 会员专区 -->
	    <div class="mui-content cz_zhuanqu">
	    	<div class="title">会员专区</div>
			<div class="cz_huiyuanleixing">
				<div class="cz_zhuanqu_box cur">
					<span>普通会员</span>
					<b><i>￥</i>199</b>
					<img src="img/pick_jiao.png">
				</div>
				<div class="cz_zhuanqu_box ">
					<span>代理会员</span>
					<b><i>￥</i>999.00</b>
					<img src="img/pick_jiao.png">
				</div>
			</div>
		</div>
		<!--会员权益-->
		<div class="mui-content cz_quanyi">
			<div>会员权益</div>
			<p>支付199元成为会员，每天领取平台发布任务并按照任务要求提交即可赚取8元佣金。</p>
			<p>每日完成任务佣金固定8元，每分享一个好友，奖励好友所交会费10%奖金并获取好友每天完成任务的8元佣金。无限级叠加。</p>
			<div style="margin-top: 2vh;">代理权益</div>
			<p>支付999元成为代理，每天领取平台发布高级任务并按照要求提交即可赚取40元佣金。</p>
			<p>每日完成任务佣金固定40元，每分享一个好友，奖励好友所交会费10%奖金。并获取直推好友每天完成任务的8元佣金，二级好友完成任务的2元佣金，无限级叠加。</p>
		</div>
		<!--底部定位-->
		<div class="mui-content bottom_btn">
			<div class="cz_dibu">
<!--				<p class="cz_dibu_title">你已经选择会员￥199.00</p>-->
				<span class="cz_dibu_btn mui-btn mui-btn-block mui-btn-primary">购买</span>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript">
			mui.init();
			mui.ready(function(){
			});
			$('.cz_zhuanqu_box').click(function () {
				$('.cz_zhuanqu_box').removeClass('cur');
				$(this).addClass('cur')
			});
		</script>
	</body>

</html>